﻿<local:WeatherControl x:Class="EmperialApps.WeatherSpark.WeatherGraph"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                      xmlns:local="clr-namespace:EmperialApps.WeatherSpark"
                      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                      xmlns:System="clr-namespace:System;assembly=mscorlib"
                      FontFamily="{StaticResource PhoneFontFamilyNormal}"
                      FontSize="{StaticResource PhoneFontSizeNormal}"
                      Foreground="{StaticResource PhoneForegroundBrush}"
                      MinHeight="10"
                      MinWidth="10"
                      mc:Ignorable="d"
                      d:DesignHeight="780"
                      d:DesignWidth="480">
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <!-- Description [0] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="TemperatureDetails" />
            <!-- Temperature [1] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="TemperatureSummary" />
            <RowDefinition x:Name="TemperatureRow"
                           Height="*"
                           local:WeatherControl.Level="TemperatureDetails" />
            <RowDefinition Height="3"
                           local:WeatherControl.Level="TemperatureDetails" />
            <RowDefinition x:Name="TimeLabelRow"
                           Height="Auto"
                           local:WeatherControl.Level="TemperatureDetails" />
            <!-- Pressure [5] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="PressureSummary" />
            <RowDefinition x:Name="PressureRow"
                           Height="0.4*"
                           local:WeatherControl.Level="PressureDetails" />
            <!-- Humidity [7] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="HumiditySummary" />
            <RowDefinition x:Name="HumidityRow"
                           Height="0.4*"
                           local:WeatherControl.Level="HumidityDetails" />
            <!-- Precipitation [9] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="PrecipitationSummary" />
            <RowDefinition x:Name="PrecipitationRow"
                           Height="0.1*"
                           MaxHeight="30"
                           local:WeatherControl.Level="PrecipitationDetails" />
            <!-- Cloud Cover [11] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="CloudCoverSummary" />
            <RowDefinition x:Name="CloudCoverRow"
                           Height="0.1*"
                           MaxHeight="30"
                           local:WeatherControl.Level="CloudCoverDetails" />
            <!-- Wind [13] -->
            <RowDefinition Height="Auto"
                           local:WeatherControl.Level="WindSummary" />
            <RowDefinition x:Name="WindRow"
                           Height="0.22*"
                           MaxHeight="60"
                           local:WeatherControl.Level="WindDetails" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"
                              MinWidth="28" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition x:Name="DataColumn"
                              Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <System:Double x:Key="PrimaryLineThickness">3</System:Double>
            <System:Double x:Key="SecondaryLineThickness">2</System:Double>
            <System:Double x:Key="TertiaryLineThickness">1</System:Double>

            <Style x:Key="GroupLabelStyle"
                   BasedOn="{StaticResource PhoneTextNormalStyle}"
                   TargetType="TextBlock">
                <Setter Property="Grid.ColumnSpan"
                        Value="3" />
                <Setter Property="Grid.Column"
                        Value="0" />
                <Setter Property="Margin"
                        Value="6,12,6,2" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="GroupLabelBackgroundStyle"
                   TargetType="Rectangle">
                <Setter Property="Grid.ColumnSpan"
                        Value="3" />
                <Setter Property="Grid.Column"
                        Value="0" />
                <Setter Property="Fill"
                        Value="{StaticResource PhoneBackgroundBrush}" />
                <Setter Property="Opacity"
                        Value="0.5" />
            </Style>

            <Style x:Key="DescriptionStyle"
                   BasedOn="{StaticResource PhoneTextTitle1Style}"
                   TargetType="TextBlock">
                <Setter Property="Margin"
                        Value="3,-18,6,-6" />
            </Style>
            <Style x:Key="LabelStyle"
                   BasedOn="{StaticResource PhoneTextNormalStyle}"
                   TargetType="TextBlock">
                <Setter Property="Margin"
                        Value="0,-2,0,0" />
                <Setter Property="FontSize"
                        Value="{StaticResource PhoneFontSizeSmall}" />
            </Style>
            <Style x:Key="ValueLabelStyle"
                   BasedOn="{StaticResource LabelStyle}"
                   TargetType="TextBlock">
                <Setter Property="HorizontalAlignment"
                        Value="Right" />
                <Setter Property="FontWeight"
                        Value="Light" />
            </Style>
            <DataTemplate x:Key="TemperatureLabelTemplate">
                <TextBlock Style="{StaticResource ValueLabelStyle}"
                           Text="{Binding StringFormat=0&#xB0;}" />
            </DataTemplate>
            <DataTemplate x:Key="PressureLabelTemplate">
                <TextBlock Style="{StaticResource ValueLabelStyle}"
                           Text="{Binding StringFormat=0}" />
            </DataTemplate>
            <DataTemplate x:Key="TimeLabelTemplate">
                <TextBlock Style="{StaticResource LabelStyle}"
                           Margin="0"
                           FontWeight="Light"
                           Text="{Binding}" />
            </DataTemplate>
            <DataTemplate x:Key="DateLabelTemplate">
                <TextBlock Style="{StaticResource LabelStyle}"
                           Padding="4,2"
                           Foreground="{StaticResource PhoneSubtleBrush}"
                           Text="{Binding}" />
            </DataTemplate>
        </Grid.Resources>

        <!-- Description -->
        <TextBlock Style="{StaticResource DescriptionStyle}"
                   Grid.ColumnSpan="3"
                   Text=" "
                   local:WeatherControl.Level="TemperatureDetails" />
        <Canvas Grid.ColumnSpan="3"
                local:WeatherControl.Level="TemperatureDetails">
            <TextBlock Style="{StaticResource DescriptionStyle}"
                       x:Name="ForecastDescription"
                       Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_LoadingFallback}" />
        </Canvas>

        <!-- Temperature -->
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="CurrentTimeLabel"
                   Grid.Row="1"
                   Foreground="{StaticResource PhoneSubtleBrush}"
                   HorizontalAlignment="Right"
                   TextAlignment="Right"
                   local:WeatherControl.Level="TemperatureSummary" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="TemperatureLabel"
                   Grid.Row="1"
                   local:WeatherControl.Level="TemperatureSummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_Temperature}"
                 FontWeight="Light" />
            <Run Foreground="{StaticResource PhoneSubtleBrush}"
                 Text=" – " />
            <Run x:Name="CurrentTemperatureLabel"
                 Foreground="{StaticResource PhoneAccentBrush}" />
            <Run x:Name="CurrentTemperatureRangeLabel"
                 FontWeight="Light"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <Grid x:Name="GridLinesContainer"
              Grid.ColumnSpan="3"
              Grid.Row="2"
              Grid.RowSpan="11"
              Margin="0,0,0,-2">
            <Rectangle x:Name="NightBackground"
                       Fill="SteelBlue"
                       Opacity="0.4"
                       local:WeatherControl.Level="TemperatureDetails">
                <Rectangle.Clip>
                    <PathGeometry />
                </Rectangle.Clip>
            </Rectangle>
            <Path x:Name="MinorTemperatureGridLines"
                  HorizontalAlignment="Right"
                  Stroke="{StaticResource PhoneSubtleBrush}"
                  StrokeThickness="{StaticResource TertiaryLineThickness}"
                  local:WeatherControl.Level="TemperatureDetails" />
            <Path x:Name="MajorTemperatureGridLines"
                  HorizontalAlignment="Right"
                  Stroke="{StaticResource PhoneSubtleBrush}"
                  StrokeThickness="{StaticResource SecondaryLineThickness}"
                  local:WeatherControl.Level="TemperatureDetails" />
            <Path x:Name="PressureGridLines"
                  HorizontalAlignment="Right"
                  Stroke="{StaticResource PhoneSubtleBrush}"
                  StrokeThickness="{StaticResource TertiaryLineThickness}"
                  local:WeatherControl.Level="PressureDetails" />
            <Path x:Name="HumidityGridLines"
                  Stroke="{StaticResource PhoneSubtleBrush}"
                  StrokeThickness="{StaticResource TertiaryLineThickness}"
                  local:WeatherControl.Level="HumidityDetails" />
            <Path x:Name="WindGridLines"
                  Stroke="{StaticResource PhoneSubtleBrush}"
                  StrokeThickness="{StaticResource TertiaryLineThickness}"
                  local:WeatherControl.Level="WindDetails" />
        </Grid>

        <Line x:Name="ExtremeTemperatureLine"
              Grid.Column="2"
              Grid.Row="2"
              Margin="0,0,0,-2"
              HorizontalAlignment="Right"
              StrokeThickness="{StaticResource SecondaryLineThickness}"
              local:WeatherControl.Level="TemperatureDetails" />
        <Canvas Grid.Column="2"
                Grid.Row="2"
                local:WeatherControl.Level="TemperatureDetails">
            <Line x:Name="ReferenceLine"
                  Stroke="{StaticResource PhoneAccentBrush}"
                  StrokeDashArray="2 2"
                  StrokeThickness="{StaticResource PrimaryLineThickness}" />
            <Polyline x:Name="TemperatureTrace"
                      Stretch="None"
                      Stroke="{StaticResource PhoneContrastBackgroundBrush}"
                      StrokeStartLineCap="Square"
                      StrokeThickness="{StaticResource PrimaryLineThickness}" />
        </Canvas>

        <Rectangle x:Name="TemperatureOverhangMask"
                   Grid.Column="0"
                   Grid.ColumnSpan="2"
                   Grid.Row="2"
                   Margin="-2,0,0,0"
                   Fill="{StaticResource PhoneBackgroundBrush}"
                   local:WeatherControl.Level="TemperatureDetails" />
        <Line Grid.Column="1"
              Grid.Row="2"
              HorizontalAlignment="Right"
              Stretch="Fill"
              Stroke="{StaticResource PhoneSubtleBrush}"
              StrokeEndLineCap="Square"
              StrokeThickness="{StaticResource SecondaryLineThickness}"
              Y2="1"
              local:WeatherControl.Level="TemperatureDetails" />
        <Line Grid.ColumnSpan="3"
              Grid.Row="3"
              Stretch="Fill"
              Stroke="{StaticResource PhoneSubtleBrush}"
              StrokeThickness="{StaticResource SecondaryLineThickness}"
              VerticalAlignment="Top"
              X2="1"
              local:WeatherControl.Level="TemperatureDetails" />

        <Grid x:Name="TimeLabelContainer"
              Grid.Column="2"
              Grid.Row="4"
              MinHeight="{StaticResource PhoneFontSizeSmall}"
              local:WeatherControl.Level="TemperatureDetails">
            <ContentPresenter Content="36912ap"
                              ContentTemplate="{StaticResource TimeLabelTemplate}"
                              Opacity="0" />
        </Grid>
        <Grid x:Name="TemperatureLabelContainer"
              Grid.Column="0"
              Grid.Row="2"
              local:WeatherControl.Level="TemperatureDetails" />

        <!-- Pressure -->
        <Rectangle Style="{StaticResource GroupLabelBackgroundStyle}"
                   Grid.Row="5"
                   local:WeatherControl.Level="PressureSummary" />
        <Canvas Grid.Column="2"
                Grid.Row="6"
                local:WeatherControl.Level="PressureDetails">
            <Polyline x:Name="PressureTrace"
                      Stretch="None"
                      Stroke="{StaticResource PressureBrush}"
                      StrokeStartLineCap="Square"
                      StrokeThickness="{StaticResource PrimaryLineThickness}" />
        </Canvas>

        <Rectangle x:Name="PressureOverhangMask"
                   Grid.Column="0"
                   Grid.ColumnSpan="2"
                   Grid.Row="5"
                   Grid.RowSpan="3"
                   Margin="-2,0,0,0"
                   Fill="{StaticResource PhoneBackgroundBrush}"
                   local:WeatherControl.Level="PressureDetails" />
        <Line Grid.Column="1"
              Grid.Row="6"
              HorizontalAlignment="Right"
              Stretch="Fill"
              Stroke="{StaticResource PhoneSubtleBrush}"
              StrokeEndLineCap="Square"
              StrokeThickness="{StaticResource SecondaryLineThickness}"
              Y2="1"
              local:WeatherControl.Level="PressureDetails" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="PressureLabel"
                   Grid.Row="5"
                   local:WeatherControl.Level="PressureSummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_Pressure}"
                 FontWeight="Light" />
            <Run x:Name="CurrentPressureLabel"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <Grid x:Name="PressureLabelContainer"
              Grid.Column="0"
              Grid.Row="6"
              local:WeatherControl.Level="PressureDetails" />

        <!-- Humidity -->
        <Rectangle Style="{StaticResource GroupLabelBackgroundStyle}"
                   Grid.Row="7"
                   local:WeatherControl.Level="HumiditySummary" />
        <Canvas Grid.Column="2"
                Grid.Row="8"
                local:WeatherControl.Level="HumidityDetails">
            <Polyline x:Name="HumidityTrace"
                      Stretch="None"
                      Stroke="{StaticResource HumidityBrush}"
                      StrokeStartLineCap="Square"
                      StrokeThickness="{StaticResource PrimaryLineThickness}" />
        </Canvas>

        <Rectangle x:Name="HumidityOverhangMask"
                   Grid.Column="0"
                   Grid.ColumnSpan="2"
                   Grid.Row="7"
                   Grid.RowSpan="3"
                   Margin="-2,0,0,0"
                   Fill="{StaticResource PhoneBackgroundBrush}"
                   local:WeatherControl.Level="HumidityDetails" />
        <Line Grid.Column="1"
              Grid.Row="8"
              HorizontalAlignment="Right"
              Stretch="Fill"
              Stroke="{StaticResource PhoneSubtleBrush}"
              StrokeEndLineCap="Square"
              StrokeThickness="{StaticResource SecondaryLineThickness}"
              Y2="1"
              local:WeatherControl.Level="HumidityDetails" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="HumidityLabel"
                   Grid.Row="7"
                   local:WeatherControl.Level="HumiditySummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_Humidity}"
                 FontWeight="Light" />
            <Run x:Name="CurrentHumidityLabel"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <TextBlock Style="{StaticResource ValueLabelStyle}"
                   Grid.Row="8"
                   Margin="0,-5,0,0"
                   Text="100"
                   VerticalAlignment="Top"
                   local:WeatherControl.Level="HumidityDetails" />
        <TextBlock Style="{StaticResource ValueLabelStyle}"
                   Grid.Row="8"
                   Text="50"
                   VerticalAlignment="Center"
                   local:WeatherControl.Level="HumidityDetails" />
        <TextBlock Style="{StaticResource ValueLabelStyle}"
                   Grid.Row="8"
                   Margin="0,0,0,-5"
                   Text="0"
                   VerticalAlignment="Bottom"
                   local:WeatherControl.Level="HumidityDetails" />

        <!-- Precipitation -->
        <Rectangle Style="{StaticResource GroupLabelBackgroundStyle}"
                   Grid.Row="9"
                   local:WeatherControl.Level="PrecipitationSummary" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="PrecipitationLabel"
                   Grid.Row="9"
                   local:WeatherControl.Level="PrecipitationSummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_Precipitation}"
                 FontWeight="Light" />
            <Run x:Name="CurrentPrecipitationLabel"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <Rectangle x:Name="PrecipitationTrace"
                   Grid.ColumnSpan="3"
                   Grid.Row="10"
                   Fill="{StaticResource PrecipitationBrush}"
                   local:WeatherControl.Level="PrecipitationDetails">
            <Rectangle.Clip>
                <PathGeometry />
            </Rectangle.Clip>
        </Rectangle>

        <!-- Cloud Cover -->
        <Rectangle Style="{StaticResource GroupLabelBackgroundStyle}"
                   Grid.Row="11"
                   local:WeatherControl.Level="CloudCoverSummary" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="CloudCoverLabel"
                   Grid.Row="11"
                   local:WeatherControl.Level="CloudCoverSummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_CloudCover}"
                 FontWeight="Light" />
            <Run x:Name="CurrentCloudCoverLabel"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <Rectangle x:Name="CloudCoverTrace"
                   Grid.ColumnSpan="3"
                   Grid.Row="12"
                   Fill="{StaticResource CloudCoverBrush}"
                   local:WeatherControl.Level="CloudCoverDetails">
            <Rectangle.Clip>
                <PathGeometry />
            </Rectangle.Clip>
        </Rectangle>

        <!-- Wind -->
        <Rectangle Style="{StaticResource GroupLabelBackgroundStyle}"
                   Grid.Row="13"
                   local:WeatherControl.Level="WindSummary" />
        <TextBlock Style="{StaticResource GroupLabelStyle}"
                   x:Name="WindLabel"
                   Grid.Row="13"
                   local:WeatherControl.Level="WindSummary">
            <Run Text="{Binding Mode=OneTime, Source={StaticResource Localized}, Path=Strings.Graph_Wind}"
                 FontWeight="Light" />
            <Run x:Name="CurrentWindLabel"
                 Foreground="{StaticResource PhoneSubtleBrush}" />
        </TextBlock>

        <Canvas Grid.Column="2"
                Grid.Row="14"
                local:WeatherControl.Level="WindDetails">
            <Path x:Name="WindTrace"
                  Fill="#FF999999"
                  Stretch="None"
                  Stroke="{StaticResource WindBrush}"
                  StrokeMiterLimit="0"
                  StrokeStartLineCap="Round"
                  StrokeThickness="{StaticResource SecondaryLineThickness}" />
        </Canvas>
    </Grid>
</local:WeatherControl>
